<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--使用@media  必须做以下操作-->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<style type="text/css">
			*{padding: 0;margin: 0;}
			
			
			@media  screen and (max-width:500px ) {
				.box{
					width: 200px;
					height: 300px;
					background: yellow;
				}
				
			}
			
			
			/*300px ~600px之间显示的样式*/
			@media  screen and (min-width: 500px) and (max-width: 800px) {
				
				.box{
					width: 200px;
					height: 300px;
					background: red;
				}
				
			}
			
			@media  screen and (min-width:800px ) {
				.box{
					width: 200px;
					height: 300px;
					background: green;
				}
				
			}
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
	</body>
	
	
</html>
